<template>
	<view class="powers">
		<view class="power">
			<view class="power-c">
				<view class="power-list power-left">
					<view class="power-text">
						短算力(sg)
					</view>
					<view class="power-num">
						<text>{{temporary_power.toFixed(1)}}</text>
					</view>
				</view>
				<view class="power-list power-right">
					<view class="power-text">
						长算力(lg)
					</view>
					<view class="power-num">
						<text>{{calculationPower}}</text>
					</view>
				</view>
				<view class="wenti">
					<text class="iconfont icon-wenti"></text>
				</view>
			</view>
		</view>
		<view class="power-title isFixed">
			<text class="sx"></text>
			<text class="title">算力记录({{typeArr[type]}})</text>
			<text class="sx" @click="isShow=true">筛选</text>
			<view class="power-lists" v-show="isShow">
				<view class="power-list" v-for="(item,index) of typeArr" 
				:key="index" @click="handleSelect(index)">
					<text>{{item}}</text>
				</view>
			</view>
		</view>
		<view class="model" v-show="isShow" @click="isShow=false"></view>
		<view class="lists">
			<view class="list" v-for="(item,index) of data" :key="index">
				<view class="list-title">
					<view class="list-title-left">
						<text v-if="item.reward_type" class="iconfont icon-yongjiu"></text>
						<text v-else class="iconfont icon-linshi"></text>
						<text class="list-title-txt">{{powerType(item.type)}}</text>
					</view>
					<text class="list-num add">+ {{item.power}}</text>
				</view>
				<view class="list-time">
					<view class="list-time-left">
						<text>{{formatDate(item.create_time*1000)}}</text>
					</view>
					<view class="list-time-right">
						<text v-if="!item.reward_type">次数：{{item.frequency}}/{{item.end_frequency}}</text>
						<text v-if="item.reward_type && item.status" class="list-status">已启用</text>
						<text v-if="item.reward_type && !item.status" class="list-status">未启用</text>
						<text v-if="!item.reward_type&&item.frequency===item.end_frequency" class="list-status">已过期</text>
						<text v-if="!item.reward_type&&item.frequency>0&&item.frequency<item.end_frequency" class="list-status">已启用</text>
						<text v-if="!item.reward_type&&item.frequency===0" class="list-status">未启用</text>
					</view>
				</view>
			</view>
			<block-loading :status="status" :len="data.length"></block-loading>
		</view>
	</view>
</template>

<script>
	import {getPowerNum,getPower} from '@/api/power.js'
	import {mapState} from "vuex"
	import {powerType,formatDate} from "@/utils/util.js"
	export default{
		name:"powers",
		data(){
			return{
				permanent_power: 0,//永久算力
				temporary_power: 0, //临时算力
				data:[],
				status:"loading",
				page:1,
				type:0,
				isShow:false,
				typeArr:['全部算力','短算力','长算力','未启用(短)','未启用(长)']
			}
		},
		computed: {
			...mapState(['userInfo','isLogin']),
			calculationPower(){
				return (Number(this.userInfo.power)+this.permanent_power).toFixed(1)
			}
		},
		mounted() {
			this.powerNum();
			this.getData();
		},
		//上拉加载
		onReachBottom() {
			this.getData();
		},
		methods:{
			formatDate(time){
				return formatDate(time);
			},
			powerType(type){
				return powerType(type);
			},
			handleSelect(index){
				this.type = index;
				this.isShow = false;
				this.data = [];
				this.page = 1;
				this.getData();
			},
			async powerNum(){
				let res = await getPowerNum();
				if(res.code === 1){
					this.permanent_power = res.data.permanent_power;
					this.temporary_power = res.data.temporary_power;
				}
			},
			async getData(){
				let res = await getPower({page:this.page,size:20,day:7,type:this.type});
				if(this.page===1&&res.data.length === 0){
					this.status = "nodata"
					return
				}
				if(this.page===1&&res.data.length > 0 && res.data.length < 20){
					this.status = "nomore"
				}
				if(res.data.length === 0){
					this.status = "nomore"
					return;
				}
				this.page++;
				this.data = this.data.concat(res.data);
			},
		}
	}
</script>

<style lang="less" scoped src="./powers.less">
</style>
